<template>
  <div class="popup">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        :placeholder="defaultKeyword.keyword"
        @search="onSearch"
        @cancel="onCancel"
        @input="onInput"
      />
    </form>
    <HistoryHot
      v-if="bloakShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @change="fun"
    ></HistoryHot>
    <SearchList
      v-if="bloakShow == 2"
      :SearchList="SearchList"
      @change1="fun"
    ></SearchList>
    <SearchTipsList
      :TipsList="TipsList"
      v-if="bloakShow == 3"
      :value="value"
    ></SearchTipsList>
  </div>
</template>

<script>
import HistoryHot from "@/components/HistoryHot.vue";
import SearchList from "@/components/SearchList.vue";
import SearchTipsList from "@/components/SearchTipsList.vue";
import { GetPopupData, GetSearchList, GetTipList } from "@/request/api";

export default {
  data() {
    return {
      value: "",
      defaultKeyword: "",
      hotKeywordList: "",
      historyKeywordList: "",
      bloakShow: 1,
      SearchList: "",
      TipsList: "",
      sou: "",
    };
  },
  created() {
    GetPopupData().then((res) => {
      // console.log(res);
      this.defaultKeyword = res.data.defaultKeyword;
      this.hotKeywordList = res.data.hotKeywordList;
      this.historyKeywordList = res.data.historyKeywordList;
    });
  },
  methods: {
    onSearch() {
      // Toast(val);
      let inval = this.value;
      this.bloakShow = 3;
      GetTipList({ keyword: inval }).then((res) => {
        console.log(res);
        let { data } = res.data;
        this.TipsList = data;
      });
    },
    onCancel() {
      this.$router.go(-1);
    },
    onInput() {
      // console.log(123);
      this.bloakShow = 2;
      // 获取表单中的数据,并传递给接口
      let inval = this.value;
      GetSearchList({ keyword: inval }).then((res) => {
        // console.log(res);
        this.SearchList = res.data;
      });
    },
    fun(v) {
      this.sou = v;
      this.value = this.sou;
      this.onSearch();
    },
  },
  components: {
    HistoryHot,
    SearchList,
    SearchTipsList,
  },
};
</script>

<style>
.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  /* background-color: rgb(153, 156, 155); */
}
</style>